
.sidebar{
  transition:transform .25s ease-out;
  color: white;
  background: #202a37;
  border-right:1px solid rgba(0,0,0,.07);
  overflow-y:auto;
  overflow-x: hidden;
  z-index:9;
  padding-bottom: 100px;

  .sidebar-nav{
    line-height:2em;
    padding-bottom:40px
  }

  li.collapse .app-sub-sidebar {
    display:none
  }

  ul {
    list-style-type: none;
    margin:0;
    padding:0
  }

  li a {
    text-decoration: none;
    border-bottom:none;
    display:block;
    margin: 6px 0 6px 20px;

    &:hover {
      opacity: 0.7;
    }
  }

  ul li ul{
    padding-left:20px
  }
}

@media screen and (max-width: $mobile_offset) {
  .sidebar {
    transform:translateX(-250px)
  }
}

.sidebar.open {
  transform:translateX(0px)
}

.sidebar-nav > ul{
  padding: 14px 24px 16px 20px !important
}
.sidebar ul li ul {
    padding-left: 12px!important;
}
.sidebar-nav ul li{
  margin: 14px 0 0 0;
}
.sidebar-nav > ul > li:first-child {
  margin-top: 0px !important;
}

.sidebar-nav a.active{
    color:#3eb1f3!important;
}

.sidebar ul li a {
    color: #fff;
    font-weight: 500;
    text-align: left;
    letter-spacing: 1px;
    line-height: 1.6;
    font-size: 15px;
}

.sidebar ul li ul li a {
    font-size: 14px;
}

.runtime-page .sidebar ul li.active>a {
  color: $color_runtime;
}

.plus-page .sidebar ul li.active>a {
  color: $color_plus;
}

.enterprise-page .sidebar ul li.active>a {
  color: $color_enterprise;
}

.sidebar ul li.active>a {
  font-weight:600;
  border-right:0px;
  border-left: 2px solid;
  padding-left: 10px;
  position: relative;
  left: -10px;
}
